<template>
    <div class="home">
        <swiper :options="swiperOption">
            <swiper-slide>
                <img class="w-100" src="../assets/img/25db819afbafc0323e5bb20ace6e453f.jpeg" alt="">
            </swiper-slide>
            <swiper-slide>
                <img class="w-100" src="../assets/img/b6f28cd9ced5cbc5e3d143a6e75d173b.jpeg" alt="">
            </swiper-slide>
            <swiper-slide>
                <img class="w-100" src="../assets/img/576084588a652830f331531c1118e86c.jpeg" alt="">
            </swiper-slide>
            <div class="swiper-pagination pagination-home text-right px-3 pb-2" slot="pagination"></div>
        </swiper>
<!--   end of swiper   -->
        <div class="nav-icons bg-white mt-3 text-center pt-3 text-dark-1">
            <div class="d-flex flex-wrap">
                <div class="nav-item mb-3" v-for="n in 10" :key="n">
                    <i class="sprite sprite-news"></i>
                    <div class="py-2">爆料站</div>
                </div>
            </div>
            <div class="py-2 bg-light fs-sm">
                <i class="sprite sprite-arrow mr-1"></i>
                <span>收起</span>
            </div>
        </div>
<!--   end of nav icons  -->
        <m-card title="新闻资讯" icon="cc-menu-circle" :news-cats="newsCats">
            <template #items="{item}">
                <router-link tag="div" :to="`/articles/${category._id}`" class="py-2 fs-lg d-flex" v-for="(category, n) in item.newsList" :key="n">
                    <span class="text-info">[{{category.categoryName}}]</span>
                    <span class="px-2">|</span>
                    <span class="flex-1 text-dark-1 text-ellipsis pr-2">{{category.title}}</span>
                    <span class="text-grey-1 fs-sm">{{category.createdAt | date}}</span>
                </router-link>
            </template>
        </m-card>

        <m-card title="英雄列表" icon="card-hero" :news-cats="heroesCats">
            <template #items="{item}">
                <div class="d-flex flex-wrap" style="margin: 0 -0.5rem">
                    <router-link tag="div" :to="`/heroes/${hero._id}`" class="p-2 text-center" style="width: 20%" v-for="(hero, n) in item.herosList" :key="n">
                        <img :src="hero.icon" alt="英雄图片" class="w-100">
                        <div>{{hero.name}}</div>
                    </router-link>
                </div>
            </template>
        </m-card>
<!--        <m-card title="精彩视频" icon="cc-menu-circle">-->

<!--        </m-card>-->
<!--        <m-card title="图文攻略" icon="cc-menu-circle">-->

<!--        </m-card>-->
    </div>
</template>

<script>
    import Card from '../components/Card'
    import dayjs from 'dayjs'

    export default {
        name: "Home",
        components: {
          'm-card': Card
        },
        data() {
            return {
                swiperOption: {
                    pagination: {
                        el: ".pagination-home"
                    }
                },
                newsCats: [],
                heroesCats: []
            }
        },
        created() {
            this.fetchNewsCats()
            this.fetchHeroesCats()
        },
        methods: {
            async fetchNewsCats() {
                const res = await this.$http.get('news/list')
                this.newsCats = res.data
            },
            async fetchHeroesCats() {
                const res = await this.$http.get('heroes/list')
                this.heroesCats = res.data
            }
        },
        filters: {
            date(val) {
                return dayjs(val).format('MM/DD');
            }
        }
    }
</script>

<style lang="scss">
    @import "../assets/scss/var";
    .pagination-home {
        .swiper-pagination-bullet {
            opacity: 1;
            border-radius: 0.1538rem;
            background: map_get($colors, 'white');
            &.swiper-pagination-bullet-active {
                background-color: map_get($colors, 'info');
            }
        }
    }
    .nav-icons {
        border-top: 1px solid $border-color;
        border-bottom: 1px solid $border-color;
        .nav-item {
            width: 25%;
            border-right: 1px solid $border-color;
            &:nth-child(4n) {
                border-right: none;
            }
        }
    }
</style>
